<template>
  <div class="main">
    <div class="userInfo-div">
      <img style="width: 40px;height: 40px;border-radius: 50%;margin-left: 3px;margin-top: 5px;"
           :src="avatarImg?avatarImg:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'">
      <div style="padding-left: 5px;padding-top: 5px;">
        <div>{{ userName }}</div>
        <div style="margin-top: 3px;">
          <span style="margin-left: 4px;"><van-icon name="certificate" :color="isAuth ==0? 'red' : 'grey'"
                                                    @click="goToAuth"/></span>
          <span style="margin-left: 4px;"><van-icon name="envelop-o" :color="email==null?'grey' : 'red'"
                                                    @click="goToEmail"/></span>
          <span style="margin-left: 4px;"><van-icon name="wechat" :color="openId ==0?'red' : 'grey'"
                                                    @click="goToWechat"/></span>
          <span style="margin-left: 4px;"><van-icon name="vip-card" :color="vip == 0 ? 'grey' : 'red'"
                                                    @click="goToVip"/></span>
          <span style="margin-left: 4px;"><van-icon name="phone-o" :color="phone==null? 'grey' : 'red'"
                                                    @click="goToPhone"/></span>
        </div>
      </div>
    </div>
  </div>
  <div style="background-color: aqua;">
    <van-grid :column-num="3">
      <van-grid-item>
                    <span
                        style="margin-bottom: 8px;font-size: var(--van-grid-item-text-font-size);line-height: 1.5;">
                        {{ balance }} &nbsp;&nbsp; RMB</span>
        <van-button type="success" size="small" @click="chargeRechargeMoney()">充&nbsp;&nbsp;值</van-button>
      </van-grid-item>
      <van-grid-item>
                    <span
                        style="margin-bottom: 8px;font-size: var(--van-grid-item-text-font-size);line-height: 1.5;">&nbsp;&nbsp;
                        {{ userPoint }}</span>
        <van-button type="success" size="small" @click="chargeMoney()">积&nbsp;&nbsp;分</van-button>
      </van-grid-item>
      <van-grid-item>
                    <span
                        style="margin-bottom: 8px;font-size: var(--van-grid-item-text-font-size);line-height: 1.5;">&nbsp;&nbsp;
                        {{ userCouponCount }}</span>
        <van-button type="success" size="small" v-on:click="myCouponList()">优&nbsp;惠&nbsp;券</van-button>
      </van-grid-item>
    </van-grid>

    <van-grid>

      <van-grid-item icon="balance-o" icon-color="red" text="我的收益" @click="income()"/>
      <van-grid-item icon="orders-o" icon-color="red" @click="myChargingOrderPage()" text="我的充电"/>
      <van-grid-item icon="cluster" icon-color="red" text="我的邀请" @click="myInviteList()"/>
      <van-grid-item icon="point-gift" icon-color="red" text="我的礼券" @click="myCouponList()"/>
    </van-grid>
    <van-grid>
      <van-grid-item icon="refund-o" icon-color="red" @click="myPayOrderPage()" text="我的支付"/>
      <!--积分变化历史-->
      <van-grid-item icon="points" icon-color="red" text="我的积分" @click="toPointsHistory()"/>
      <van-grid-item icon="bulb-o" icon-color="red" text="我的桩站" @click="toStationInfo()"/>
      <van-grid-item icon="bill-o" icon-color="red" text="我的投资"/>
    </van-grid>
    <van-grid>
      <van-grid-item icon="star-o" icon-color="red" text="我的收藏"/>
      <van-grid-item icon="list-switch" icon-color="red" @click="ChangeCars()" text="我的汽车" />
      <van-grid-item icon="friends-o" icon-color="red" text="我的组团"/>
      <van-grid-item icon="friends-o" icon-color="red" text="商品兑换" @click="toExchangeProduct()"/>
      <van-grid-item icon="phone" icon-color="red" text="我的客服" @click="usertoupload()"/>
      <van-grid-item icon="manager-o" icon-color="red" text="个人中心" @click="toUserInfo()"/>
      <van-grid-item @click="toDazhuanpan()">
        <svg viewBox="0 0 24 24" width="26" height="26" style="color: #ff4444;">
          <path fill="currentColor" d="M14.19,14.19L6,18L9.81,9.81L18,6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,10.9A1.1,1.1 0 0,0 10.9,12A1.1,1.1 0 0,0 12,13.1A1.1,1.1 0 0,0 13.1,12A1.1,1.1 0 0,0 12,10.9Z"/>
        </svg>
        <span>积分抽奖</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script setup>
import router from '@/router';
import {GetUserInfo} from '@/api/user.js'
import {UserCouponCount, UserPoint} from '@/api/market.js'
import {ref} from 'vue';

//状态
var isAuth=ref("");
var vip = ref(0);
var openId = ref("");
var email = ref("");
var phone = ref("");

var userName = ref('');
var balance = ref(0);
var userCouponCount = ref(0);
var userPoint = ref(0);
var avatarImg = ref("")  // 将用户头像设置为动态的

init();

function init() {
  var token = localStorage.getItem("token");
  // 检查 token 是否为空字符串或其他非期望的值
  if (!token || token.trim() === '') { // 使用 trim() 来移除两端的空白字符并检查是否为空字符串
    console.info("token 不存在或为空字符串");
    router.push('/user/login');
  } else {
    getUserInfo();

  }
}


function getUserInfo() {
  GetUserInfo()
      .then(res => {
        if (res.data.code == 200000) {
          userName.value = res.data.data.nickName
          avatarImg.value = res.data.data.avatarImg
          balance.value = res.data.data.balance
          //判断状态是否认证
          isAuth.value=res.data.data.authentication
          vip.value = res.data.data.vip
          openId.value = res.data.data.openId
          email.value = res.data.data.email
          phone.value = res.data.data.phone
          getUserCouponCount();
          getUserPoint();
        } else {
          router.push('/user/login');
        }
      }).catch(error => {
    // 这里捕获GetUserInfo()方法执行过程中发生的任何错误
    console.error('An error occurred:', error);
    // 无论是由于什么错误，都跳转到登录页面
    router.push('/user/login');
  });
}


function getUserCouponCount() {
  UserCouponCount()
      .then(res => {
        if (res.data.code == 200000) {
          userCouponCount.value = res.data.data;
        } else {
          router.push('/user/login');
        }
      })
}


function getUserPoint() {
  UserPoint()
      .then(res => {
        if (res.data.code == 200000) {
          userPoint.value = res.data.data.point;
        } else {
          router.push('/user/login');
        }
      })
}

// 充值
function chargeRechargeMoney(){
  router.push('/user/charge/money');
}

function chargeMoney() {
  router.push('/user/points/history/change');
}

function myInviteList() {
  router.push('/my/invite');
}

function myCouponList() {
  router.push('/my/coupon/index');
}
function usertoupload() {
  router.push('/my/user/toupload');
}

function myChargingOrderPage() {
  router.push('/user/charging/order');
}

function myPayOrderPage() {
  router.push('/user/pay/order');
}

function income() {
  router.push('/income/myIncome')
}

function toUserInfo(){
  router.push('/user/userinfo')
}

function toPointsHistory(){
  router.push('/user/points/history/change')
}
function ChangeCars(){
  router.push('/cars/MyCars')
}

// 添加跳转函数
function goToAuth() {
  router.push('/user/auth');
}

function goToEmail() {
  router.push('/binding/EmailBinding');
}

function goToWechat() {
  router.push('/binding/WechatBinding');
}

function goToVip() {
  router.push('/binding/VipStatus');
}

function goToPhone() {
  router.push('/binding/PhoneBinding');
}

function toDazhuanpan() {
  router.push('/zhuanpan/dazhuanpan');
}
// 跳转我的装站
function toStationInfo(){
  router.push("/my/station")
}

function toExchangeProduct(){
  router.push('/exchange/product');
}

</script>

<style>
.main {
  margin-top: 8px;
  margin-left: 8px;
  margin-right: 8px;
}

.userInfo-div {
  height: 65px;
  width: auto;
  display: flex;
  padding-top: 8px;
  /* background-color: aquamarine; */
}
</style>